import React, { useState, useEffect } from "react";

const App: React.FC = (props) => {
  const [text, setText] = useState("");
  const [timer, setTimer] = useState(null);

  useEffect(() => {
    console.log(props.text);
    setText("");
    if (timer) {
      clearInterval(time);
      setTimer(null);
    }
    let index = 0;
    setTimer(
      setInterval(() => {
        setText(props.text.slice(0, index++));
        if (index > text.length) {
          clearInterval(timer);
        }
      }, 100)
    );
  }, [props.text]);

  return <>{text}</>;
};

export default App;
